<template>
    <div>
     <itemmusic-top :playlist="state.playlist"></itemmusic-top>
     <itemMusicList :itemList="state.itemList" :subscribedCount="state.playlist.subscribedCount"/>
     <itemMusicFooter/>
    </div>
</template>

<script>
import {useRoute} from 'vue-router'
import { onMounted,reactive } from 'vue';
import {getPlayList,getPlayMusic} from '@/request/api/item.js'
import ItemmusicTop from '@/components/item/ItemmusicTop.vue'
import itemMusicList from '@/components/item/itemMusicList.vue'
import itemMusicFooter from '@/components/item/itemMusicFooter.vue'
    export default {
        setup(){
            const state =reactive({
                playlist:{},
                itemList:[]
            })
            onMounted(async()=>{
                let id =useRoute().query.id
               let res =await getPlayList(id)
               console.log(res);
            //    获取详情页
               state.playlist=res.data.playlist
            //    
           let result =await getPlayMusic(id)
           console.log(result,'2')
            state.itemList =result.data.songs
               sessionStorage.setItem('itemDetail',JSON.stringify(state))

            })
            return{state}
          
        },
        components:{
            ItemmusicTop
        }
    }
</script>

<style lang="less" scoped>

</style>